<template>
  <span>终端状态</span><a-badge count="1" :status='onlineStatus[online][0]' :text="onlineStatus[online][1]" style="margin-left: 15px"></a-badge>
</template>

<script lang="ts">
import {defineComponent, onBeforeUnmount, reactive, toRefs} from "vue"
import {Badge} from "ant-design-vue"
import {ClientOnlineList} from "@/api/client"

export default defineComponent({
  name: "terminal-status-title",
  components:{
    [Badge.name]:Badge
  },
  props:{
    clientHash:String
  },
  setup(props){
    const state= reactive({
      online:0,
      timer: null as any, // 轮询定时器
    })

    const onlineStatus = {
      1:["processing","在线"],
      0:["default","离线"]
    }

    // 获取在线的客户端列表
    const getClientOnlineList = () => {
      clearInterval(state.timer)
      state.timer = setInterval( async () => {
        const list = await ClientOnlineList() as Array<string>
        const wrap={}
        wrap['clienthash']=props.clientHash
        if(list.includes(wrap['clienthash'])){
          state.online=1
        }else{
          state.online=0
        }
      }, 10000)
      onBeforeUnmount(() => {
        clearInterval(state.timer)
      })
    }

    ~ async function (){
      if(null!=props.clientHash){
        const list = await ClientOnlineList() as Array<string>
        const wrap={}
        wrap['clienthash']=props.clientHash
        if(list.includes(wrap['clienthash'])){
          state.online=1
        }
      }
      getClientOnlineList()
    }()

    return{
      ...toRefs(state),
      onlineStatus
    }
  }
})
</script>

<style scoped>

</style>
